<template>
  <view class="personal-page">
    <!-- 顶部区域 -->
    <view class="top-area">
      <!-- 头像和用户信息 -->
      <view class="user-info">
        <image 
          class="avatar-btn" 
          :src="userInfo.headIcon" 
          mode="aspectFill"
          @click="navigateToUserInfo"
			@error="handleAvatarError"
        ></image>
        <view class="user-text">
          <text class="username">{{ userInfo.username }}</text>
           <!-- 核心修改：拆分会员到期时间为两行 -->
              <view class="vip-info-container">
                <!-- 场景1：已开通会员（有isVip）→ 显示“会员到期时间”标签 + 具体时间 -->
                <template v-if="userInfo.isVip">
                  <text class="vip-info-label">会员到期时间</text> <!-- 仅会员显示此标签 -->
                  <text class="vip-info-time">{{ userInfo.vipEndTime }}</text>
                </template>
                <!-- 场景2：未开通会员（无isVip）→ 仅显示“未开通会员”，无任何标签 -->
                <text class="vip-info-default" v-else>未开通会员</text>
              </view>
        </view>
      </view>
      
      <!-- 退出登录按钮 -->
    <view class="icon-btn" @click="LogoutHandle">
        <image 
          class="func-icon" 
          src="/static/icons/Logout.png" 
          mode="widthFix"
          alt="退出登录"
        ></image>
        <text class="icon-text">退出登录</text>
      </view>
     </view> 

    <!-- 快捷功能按钮区 -->
    <view class="quick-buttons">
      <view 
        class="quick-btn" 
        @click="navigateTo(`/pages/zj/MyInterview?userId=${userInfo.userId}`)"
      >
        <image 
          class="quick-btn-icon" 
          src="/static/icons/MyInterview.png" 
          mode="widthFix"
        ></image>
        <text class="quick-btn-text">面试记录</text>
      </view>
      <view 
        class="quick-btn" 
        @click="navigateTo('/pages/zj/Collect')"
      >
        <image 
          class="quick-btn-icon" 
          src="/static/icons/collect.png" 
          mode="widthFix"
        ></image>
        <text class="quick-btn-text">我的收藏</text>
      </view>
    </view>

    <!-- VIP按钮：条件渲染（非VIP显示升级按钮，VIP显示会员提示按钮） -->
      <view 
        class="vip-banner-btn"
        :class="{ 'vip-banner-btn--member': userInfo.isVip === 1 }" 
        @click="handleVipBannerClick" 
        v-if="userInfo.isVip !== null" 
      >
        <!-- 非VIP文案（isVip=0） -->
        <view class="vip-banner-content" v-if="userInfo.isVip === 0">
          <text class="vip-title">想快点找到工作？快升级VIP</text>
          <text class="vip-desc">今日5万人加速中，再不追就晚啦</text>
        </view>
        
        <!-- VIP文案（isVip=1） -->
        <view class="vip-banner-content" v-else>
          <text class="vip-title">恭喜你成为我们的会员！</text>
          <text class="vip-desc">开启AI模拟面试，提升你的面试经验吧～</text>
        </view>
        
        <!-- 按钮右侧文字：非VIP显示“去升级”，VIP显示“去体验” -->
        <text class="upgrade-text" v-if="userInfo.isVip === 0">去升级 →</text>
        <text class="upgrade-text" v-else>去体验 →</text>
      </view>
    
      <!-- 信息加载中：占位符（避免页面抖动） -->
      <view class="vip-banner-btn--loading" v-else>
        <view class="vip-banner-content">
          <text class="vip-title">加载中...</text>
          <text class="vip-desc">请稍候查看会员权益</text>
        </view>
      </view>

    <!-- 常用功能按钮区 -->
    <view class="common-functions">
      <text class="section-title">常用功能</text>
      <view class="function-grid">
        <view 
          class="function-btn" 
          v-for="(item, index) in functionList" 
          :key="index"
           @click="item.isVipRequired ? handleVipRecordClick(item) : navigateTo(item.url)"
        >
          <image 
            class="function-icon" 
            :src="item.icon" 
            mode="widthFix"
          ></image>
          <text class="function-text">{{ item.name }}</text>
          <view class="badge" v-if="item.badge">{{ item.badge }}</view>
        </view>
      </view>
    </view>

    <!-- VIP升级弹窗 -->
    <view class="vip-popup-mask" v-if="showVipPopup" @click="showVipPopup = false">
      <view class="vip-popup" @click.stop>
        <!-- 弹窗标题 -->
        <text class="vip-popup-title">会员购买</text>
        
        <!-- 购买选项（修改后） -->
                <view class="vip-option-list">
                  <view 
                    class="vip-option" 
                    :class="{ active: selectedPackage.id === 1 }" 
                    @click="selectPackage(1)"
                  >
                    <text class="option-period">1个月</text>
                    <text class="option-price">30元</text>
                  </view>
                  <view 
                    class="vip-option" 
                    :class="{ active: selectedPackage.id === 2 }" 
                    @click="selectPackage(2)"
                  >
                    <text class="option-period">3个月</text>
                    <text class="option-price">90元</text>
                  </view>
                  <view 
                    class="vip-option" 
                    :class="{ active: selectedPackage.id === 3 }" 
                    @click="selectPackage(3)"
                  >
                    <text class="option-period">1年</text>
                    <text class="option-price">360元</text>
                  </view>
                </view>
        
        <!-- 确认支付按钮 -->
        <view class="confirm-pay-btn" @click="confirmPay" :disabled="!selectedPackage.id">
          确认支付开通会员
        </view>
      </view>
    </view>

  <!-- 底部导航栏 -->
   <u-tabbar v-model="current" :list="list" :mid-button="false" @change="tabChangeHandler"></u-tabbar>
  </view>
</template>

<script>
	import state from '../../store/state';
	import{order}from '@/api/order.js'
export default {
  data() {
    return {
      // 用户信息
      userInfo: {
		userId:null,
        headIcon: '', // 头像
        username: '',
        vipEndTime: '',
		isVip: null,
      },
      list: [
                {
                  iconPath: "home",
                  selectedIconPath: "home-fill",
                  text: "首页",
                  count: 2,
                  isDot: true,
                  customIcon: false,
                   pagePath: "/pages/zcy/main"  // 对应首页的页面路径
                },
                {
                  iconPath: "chat",
                  selectedIconPath: "chat-fill",
                  text: "聊天",
                  customIcon: false,
                   pagePath: "/pages/zj/ChatList"  // 对应首页的页面路径
                },
                {
                  iconPath: "account",
                  selectedIconPath: "account-fill",
                  text: "个人中心",
                  count: 23,
                  isDot: false,
                  customIcon: false,
                  pagePath: "/pages/zj/PersonalCenter"  // 对应个人中心的页面路径
                },
              ],
              current: 0,
      // 功能按钮列表
      functionList: [
		  
        {
          name: '在线简历',
          icon: '/static/icons/OnlineResumeEditing.jpeg',
          url: '/pages/zj/OnlineResumeEditing',
          badge: '待优化2项'
        },
        {
          name: '附件简历',
          icon: '/static/icons/AttachedResume.png',
          url: '/pages/zj/AttachedResume',
          badge: '及时更新'
        },
        {
          name: 'AI模拟面试',
          icon: '/static/icons/UserToAI.png',
          url: `/pages/zj/userSelectsAI?userId=${state.userInfo.userId}`,
		   isVipRequired: true,
        },
        {
          name: '黑名单',
          icon: '/static/icons/Blacklist.png',
          url: '/pages/zj/Blacklist'
        },
        {
          name: '客服',
          icon: '/static/icons/UserToServiceChat.png',
          url: '/pages/zj/UserToServiceChat'
        },
        {
          name: '会员购买记录',
          icon: '/static/icons/BuyRecord.png',
          url: '/pages/zj/BuyRecord',
		   isVipRequired: true, // 新增：标识该功能需要会员权限
        }
      ],
      // 弹窗相关
      showVipPopup: false, // 控制弹窗显示隐藏
       // 选中的套餐信息（核心新增）
            selectedPackage: {
              id: null,       // 套餐ID
              duration: 0,    // 时长（月）
              amount: 0,      // 金额
            }
    };
  },
  // 页面加载时获取用户信息
  onLoad() {
   this.loadUserInfo();
  },
  
  methods: {
	  // 新增：VIP按钮统一点击事件（区分VIP/非VIP）
	    handleVipBannerClick() {
	      if (this.userInfo.isVip === 0) {
	        // 非VIP：打开会员购买弹窗（原逻辑）
	        this.showVipPopup = true;
	      } else if (this.userInfo.isVip === 1) {
	        // VIP：直接跳转“AI模拟面试”页面（无弹窗）
	        this.navigateTo('/pages/zj/UserToAI');
	      } else {
	        // 信息未加载：提示加载中
	        uni.showToast({ title: '会员信息加载中，请稍后', icon: 'none' });
	      }
	    },
	    // 新增：会员购买记录点击事件（带权限判断）
	    handleVipRecordClick(item) {
	      // 1. 先判断用户信息是否加载完成（避免isVip为null）
	      if (this.userInfo.isVip === null) {
	        uni.showToast({ title: '用户信息加载中，请稍后', icon: 'none' });
	        return;
	      }
	      // 2. 会员身份判断
	      if (this.userInfo.isVip === 1) {
	        // 会员：拼接userId并跳转页面（确保userId存在）
	        const targetUrl = item.url.includes('userId')
	         ? item.url
	          : `${item.url}?userId=${this.userInfo.userId}`;
	        this.navigateTo(targetUrl);
	      } else {
	        // 非会员：提示开通，并点击确定打开会员购买弹窗
	        const tip = item.name === '会员购买记录'
	         ? '请开通会员后查看购买记录'
	          : '请开通会员后使用AI模拟面试功能';
	        uni.showModal({
	          title: '权限提示',
	          content: tip,
	          confirmText: '去开通',
	          cancelText: '取消',
	          success: (res) => {
	            // 点击“去开通”则打开会员购买弹窗
	            if (res.confirm) {
	              this.showVipPopup = true;
	            }
	          }
	        });
	      }
	    },
	  // 选择会员套餐（核心新增）
	      selectPackage(packageId) {
	        // 根据套餐ID设置时长和金额
	        switch(packageId) {
	          case 1:
	            this.selectedPackage = {id: 1, duration: 1, amount: 30};
	            break;
	          case 2:
	            this.selectedPackage = {id: 2, duration: 3, amount: 90};
	            break;
	          case 3:
	            this.selectedPackage = {id: 3, duration: 12, amount: 360};
	            break;
	        }
	      },
	  
	      // 确认支付（核心修改）
	      confirmPay() {
	        // 校验：必须选中套餐且用户已登录
	        if (!this.selectedPackage.id) {
	          uni.showToast({ title: '请选择会员套餐', icon: 'none' });
	          return;
	        }
	        
	        // 调用后端支付接口（核心逻辑）
	        const params = {
	          buyDuration: this.selectedPackage.duration,      // 购买时长（月）
	          amount: this.selectedPackage.amount,             // 支付金额
	          userId: this.userInfo.userId                     // 当前用户ID
	        };
			
			order(params).then(res =>{
				console.log(res)
				
					
					// 后端返回支付宝支付表单HTML，直接渲染到页面并提交
					const div = document.createElement('div');
					div.innerHTML = res; // 支付宝表单内容
					document.body.appendChild(div);
					// 自动提交表单，跳转到支付宝沙箱支付页面
					div.querySelector('form').submit();
				   
			})			
			// 关闭弹窗
			this.showVipPopup = false;	        
	      },

	  // 头像加载失败时，强制使用默认头像
	    handleAvatarError() {
	      this.userInfo.headIcon = "/static/avatar/avatar.png";
	    },
	  // 加载用户信息（打开页面时获取）
	  loadUserInfo() {
	  	 if (!state.userInfo) {
	  	    setTimeout(() => {
	  	          this.loadUserInfo(); // 执行你的方法
	  	        }, 2000);
				return;
	  	  }
		  this.userInfo.username = state.userInfo.username;
		  this.userInfo.headIcon = state.userInfo.headIcon;
		  this.userInfo.userId = state.userInfo.userId;
		  // 调用格式化方法处理到期时间
		    this.userInfo.vipEndTime = this.formatDateTime(state.userInfo.vipEndTime); 
		  this.userInfo.isVip = state.userInfo.isVip;
	  },
	  //导航栏跳转
    tabChangeHandler(index){
      const pagePath = this.list[index].pagePath;
          // 必须用 switchTab 跳转 tabBar 页面
          uni.switchTab({
            url: pagePath,
            fail: (err) => {
              console.error("跳转失败：", err); // 打印错误原因
            }
          });
    },
    navigateToUserInfo() {
          // 跳转到用户信息页面
          uni.navigateTo({
            url: '/pages/zj/PersonInfo'  
          });
        },
    
    // 退出登录
    LogoutHandle() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出当前账号吗？',
        confirmText: '退出',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
			  // 仅通过 Cookie 的 key 删除对应的 Token
			          const deleteCookieByKey = (key) => {
			            // 获取当前所有 Cookie
			            const cookies = document.cookie.split(';');
			            
			            // 遍历所有 Cookie 找到目标 key 并删除
			            cookies.forEach(cookie => {
			              const [cookieKey] = cookie.trim().split('=');
			              // 匹配目标 key
			              if (cookieKey === key) {
			                // 设置过期时间为过去，强制浏览器删除该 Cookie
			                document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
			              }
			            });
			          };
			          
			          // 调用方法，传入你的 Token 在 Cookie 中的 key（例如 'token'）
			          deleteCookieByKey('satoken');
            uni.removeStorageSync('userInfo');
            uni.navigateTo({
              url: '/pages/zcy/login'
            });
          }
        }
      });
    },
    
    // 页面跳转
    navigateTo(url) {
      uni.navigateTo({
        url: url,
        fail: () => {
          // 如果是tab页，使用switchTab
          uni.switchTab({
            url: url
          });
        }
      });
    },
    
	// 辅助方法：格式化日期时间
	  formatDateTime(dateTimeStr) {
	    if (!dateTimeStr) return '未开通会员';
	    const date = new Date(dateTimeStr);
	    const year = date.getFullYear();
	    const month = String(date.getMonth() + 1).padStart(2, '0');
	    const day = String(date.getDate()).padStart(2, '0');
	    const hour = String(date.getHours()).padStart(2, '0');
	    const minute = String(date.getMinutes()).padStart(2, '0');
	    const second = String(date.getSeconds()).padStart(2, '0');
	    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
	  }
  }
};
</script>

<style scoped>
.personal-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
}

/* 顶部区域样式 */
.top-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

/* 头像按钮样式 */
.avatar-btn {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 2rpx solid #eee;
  margin-right: 20rpx;
  /* 按钮效果 */
  transition: transform 0.2s;
}

.avatar-btn:active {
  transform: scale(0.95);
}

.user-text {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

/* 会员信息容器：控制垂直排列 */
.vip-info-container {
  display: flex;
  flex-direction: column; /* 垂直分行 */
  gap: 4rpx; /* 上下两行的间距，可根据需求调整 */
}

/* 上行：会员到期时间标签（字体稍小，颜色偏浅） */
.vip-info-label {
  font-size: 24rpx;
  color: #888; /* 比原颜色浅，突出时间内容 */
}

/* 下行：具体到期时间（字体稍大，颜色正常，加粗突出） */
.vip-info-time {
  font-size: 26rpx;
  color: #666;
  font-weight: 500; /* 轻微加粗，让时间更醒目 */
}

/* 未开通会员：保持原有样式（与原vip-info一致） */
.vip-info-default {
  font-size: 26rpx;
  color: #666;
}

/* 退出登录按钮 */
.icon-btn {
  display: flex;
  flex-direction: column; /* 图标在上，文字在下 */
  align-items: center;    /* 水平居中 */
  justify-content: center;
  margin: 0 20rpx;        /* 按钮之间的间距 */
  /* 移除所有按钮背景、边框样式 */
}

/* 图标样式 - 作为主要交互元素 */
.func-icon {
  width: 30rpx;           /* 图标大小 */
  height: 25rpx;
  object-fit: contain;
  /* 增加点击热区 */
  padding: 8rpx;
  /* 点击反馈过渡 */
  transition: all 0.2s;
}

/* 文字样式 */
.icon-text {
  font-size: 24rpx;
  color: #333;
  margin-top: 8rpx;
  text-align: center;
}

/* 点击效果 - 仅作用于图标 */
.icon-btn:active .func-icon {
  transform: scale(0.9);  /* 图标点击缩放 */
  opacity: 0.7;           /* 点击时略微透明 */
}

/* 快捷按钮区域 */
.quick-buttons {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx 0;
  margin-bottom: 20rpx;
}

/* 快捷按钮样式 */
.quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160rpx;
  /* 按钮点击效果 */
  border-radius: 12rpx;
  padding: 10rpx;
  transition: background-color 0.2s;
}

.quick-btn:active {
  background-color: #f5f5f5;
}

.quick-btn-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 12rpx;
}

.quick-btn-text {
  font-size: 28rpx;
  color: #333;
}

/* VIP升级按钮 */
.vip-banner-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #ff7d00, #ffb700);
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  color: #fff;
  /* 按钮效果 */
  transition: opacity 0.2s;
}

.vip-banner-btn:active {
  opacity: 0.9;
}

.vip-banner-content {
  flex: 1;
}

.vip-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: block;
}

.vip-desc {
  font-size: 24rpx;
  opacity: 0.9;
}

.upgrade-text {
  font-size: 28rpx;
  font-weight: bold;
  padding-left: 20rpx;
}

/* 常用功能区域 */
.common-functions {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}

.function-grid {
  display: flex;
  flex-wrap: wrap;
}

/* 功能按钮样式 */
.function-btn {
  width: 33.333%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 0;
  position: relative;
  /* 按钮效果 */
  transition: background-color 0.2s;
}

.function-btn:active {
  background-color: #f5f5f5;
}

.function-icon {
  width: 56rpx;
  height: 56rpx;
  margin-bottom: 12rpx;
}

.function-text {
  font-size: 26rpx;
  color: #333;
  text-align: center;
}

/* 徽章样式 */
.badge {
  position: absolute;
  top: 16rpx;
  right: 30rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 12rpx;
  white-space: nowrap;
}

/* VIP会员购买弹窗样式 */
.vip-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.vip-popup {
  width: 85%;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-sizing: border-box;
}

.vip-popup-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 30rpx;
}

.vip-option-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
  gap: 20rpx;
}

.vip-option {
  flex: 1;
  border: 2rpx solid #eee;
  border-radius: 12rpx;
  padding: 20rpx 0;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.vip-option.active {
  border-color: #ff7d00;
  background-color: #fff8e1;
}

.option-period {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.option-price {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #ff4d4f;
}

.confirm-pay-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #ff7d00;
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  border-radius: 40rpx;
  margin-top: 20rpx;
  cursor: pointer;
  transition: background-color 0.2s;
}

.confirm-pay-btn:active {
  background-color: #e66a00;
}

/* 新增：VIP会员按钮样式（绿色渐变） */
.vip-banner-btn--member {
  background: linear-gradient(135deg, #00b42a, #4cd263); /* VIP绿色渐变 */
}

/* 新增：信息加载中占位样式（灰色背景，弱化显示） */
.vip-banner-btn--loading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  color: #999;
}
</style>
